<template>
  <div class="fullMain" style="max-height: calc(100% - 50px);overflow: scroll;">
    <div style="position:fixed; width:100%; z-index:999">
      <x-header :left-options="{backText: '',showBack: back}"> 
        毕业总结<a slot="right"><i class="fa fa-send" style="color:white" @click="submit()">submit</i></a>
      </x-header>
      <tab bar-active-color="#FF7F00">
        <tab-item selected @on-item-click="showReview()">回顾总结</tab-item>
        <tab-item @on-item-click="showSuggestion()">给实验室的建议</tab-item>
      </tab>
    </div>
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert"> {{alertText}}</alert>
    </div>
    <div style="height:90px"/>
    <group v-show="isShowReview">
      <label v-if="isShowReviewWritten">{{review}}</label>
      <x-textarea v-model="review" autosize v-else></x-textarea>
      <div style="position:fixed; z-index:999; right:2rem; bottom:5rem" v-if="isShowReviewWritten">
        <x-button type="primary" @click.native="isShowReviewWritten = false">修改</x-button>
      </div>
    </group>
    <group v-show="isShowSuggestion">
      <label v-if="isShowSuggestionWritten">{{suggestion}}</label>
      <x-textarea v-model="suggestion" autosize v-else></x-textarea>
      <div style="position:fixed; z-index:999; right:2rem; bottom:5rem" v-if="isShowSuggestionWritten">
        <x-button type="primary" @click.native="isShowSuggestionWritten = false">修改</x-button>
      </div>
    </group>
    <br><br>
  </div>
</template>

<script>
  import {XHeader,XTextarea,Group,XButton,XSwitch,Tab, TabItem} from 'vux'
  import {mapState} from 'Vuex'
  import year from 'api/year'
  import common from 'utilMethods/common.js'
  export default {
    name: 'S_graduation_summary',
    data () {
      return {
        isShowAlert:false,
        alertText:'',
        isShowReview: true, // 显示回顾页面
        isShowSuggestion: false, // 显示建议页面
        isShowReviewWritten: false, // 显示提交过的回顾
        isShowSuggestionWritten: false, // 显示提交过的建议
        review: '',
        suggestion: '',
        isUpdate: false,
        reportType: 4, // 4-毕业总结
        graduateReportModified: {},
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
    },
    components: {
      XHeader,
      XTextarea,
      Group,
      XButton,
      XSwitch,
      Tab, 
      TabItem
    },
    mounted () {
      this.init();
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      showAlert (alertText) {
        this.isShowAlert = true
        this.alertText = alertText
      },
      closeTip () {
        this.isShowAlert = false
        this.alertText = ''
      },
      async init () {
        let resOfSummary = await year.getSingleGraduateReport({userId: this.userInfo.userId});
        console.log('毕业总结');
        console.log(resOfSummary);
        this.showAlert("填写后请点击右上角进行提交，方便您之后更改");
        setTimeout(this.closeTip, 1700);
        if (1 === resOfSummary.code) {
          this.isUpdate = true;
          this.isShowReviewWritten = true;
          this.isShowSuggestionWritten = true;
          this.graduateReportModified = resOfSummary.data;
          this.review = this.graduateReportModified.review;
          this.suggestion = this.graduateReportModified.suggest;
        }
      },
      showReview () {
        this.isShowReview = true;
        this.isShowSuggestion = false;
      },
      showSuggestion () {
        this.isShowSuggestion = true;
        this.isShowReview = false;
      },
      async submit () {
        let date = common.getCurrentTime();
        let graduateReport = {
          date: date,
          detail: {
            review: this.review,
            suggest: this.suggestion
          },
          reportType: this.reportType,
          userId: this.userInfo.userId
        };
        if (!this.isUpdate) {
          this.postData(graduateReport);
        } else {
          graduateReport['reportId'] = this.graduateReportModified.reportId;
          this.updateData(graduateReport);
        }
      },
      isHasEmptyElement (graduateReport) {
        let reg = /^[ ]*$/;
        let seg = (reg.test(graduateReport.detail.review) || reg.test(graduateReport.detail.suggest));
        return seg;
      },
      async postData (graduateReport) {
        if (this.isHasEmptyElement(graduateReport)) {
          this.showAlert("内容不可为空");
          return ;
        }
        let resOfPostGraduateReport = await year.postGraduateReport(graduateReport);
        console.log(resOfPostGraduateReport);
        if (1 === resOfPostGraduateReport.code) {
          this.showAlert("提交成功");
          setTimeout(this.back, 1000);
        } else {
          this.showAlert(resOfPostGraduateReport.message);
        }
      },
      async updateData (graduateReport) {
        if (this.isHasEmptyElement(graduateReport)) {
          this.showAlert("内容不可为空");
          return ;
        }
        let resOfUpdateGraduateReport = await year.updateGraduateReport(graduateReport);
        console.log(resOfUpdateGraduateReport);
        if (1 === resOfUpdateGraduateReport.code) {
          this.showAlert("提交成功");
          setTimeout(this.back, 1000);
        } else {
          this.showAlert(resOfUpdateGraduateReport.message);
        }
      }
    }
  }
</script>

<style scoped>
  .contentAll{
    width:90%;
    margin-left:5%;
    border-radius: 20px;
  }
</style>